<template>
    <a-modal :open :width :title :okText :footer destroyOnClose @cancel="() => { open = false; cancelFn?.() }" @ok="okFn">
        <slot name="header" />
        <a-table :scroll="{ x: 1000, y: '60vh' }" bordered :columns :pagination :dataSource @change="changeFn">
            <template #bodyCell="{ text, record, index, column }">
                <slot name="bodyCell" :column :text :record :index />
            </template>
        </a-table>
    </a-modal>
</template>
<script lang='ts' setup>
import { ref, watch } from 'vue';
interface Props {
    title?: string,
    width?: string | number,
    footer?: string | Function,
    changeFn: Function
    okFn?: Function
    cancelFn?: Function
    columns: Record<string, string>[],
    pagination: object
    dataSource: any[]
    okText?: string
}
const props = defineProps<Props>()
const emits = defineEmits(['open'])
const open = defineModel("open", { type: Boolean, default: false })

watch(
    () => open.value,
    (newVal, oldVal) => {
        if (newVal) {
            emits('open')
        }
    },
    { immediate: true }
)

defineExpose({ open })

</script>
<style lang='scss' scoped>
:deep(.ant-modal-content) {
    padding: .5rem !important;
}
</style>